<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的生活</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <style>
        .image_parent img{
            height: 50pt;
        }
        .image_parent div{
            font-size: 12pt;
        }
        .image_parent .row{
            margin: 20pt auto;
        }
        h4{
            text-align: center;
        }
        .bar .searchbar{
            background-image: linear-gradient(-90deg, #02A6FF 0%, #0093F8 100%);
        }
        .item-inner .item-title-row{
            line-height: 40px;
        }
        .my_header{
            height: 150px;
            width: 100%;
            padding-top: 10px ;
            background: url(images/pic/header.png);
            background-size: cover;
        }
        .my{
            text-align: center;
        }
        .my img{
            width: 80px;
        }
        .list{
            margin-top: 0;
        }
    </style>
  </head>
  <body>
    <div class="page-group">
        <div class="page page-current" id="shouye">
          <header class="bar bar-nav">
              <div class="searchbar">
                <a class="searchbar-cancel">取消</a>
                <div class="search-input">
                  <label class="icon icon-search" for="search"></label>
                  <input type="search" id='search' placeholder='输入关键字...'/>
                </div>
              </div>
          </header>
          <nav class="bar bar-tab">
            <a class="tab-item active" href="#shouye">
              <span class="icon icon-home"></span>
              <span class="tab-label">首页</span>
            </a>
            <a class="tab-item" href="#shequ">
              <span class="icon icon-friends"></span>
              <span class="tab-label">社区</span>
            </a>
            <a class="tab-item" href="#fabiao">
              <span><img src="images/icon/add.png" alt="" width="30pt"></span>
              <span class="tab-label"></span>
            </a>
            <a class="tab-item" href="#zixun">
              <span class="icon icon-browser"></span>
              <span class="tab-label">资讯</span>
            </a>
            <a class="tab-item" href="#wode">
              <span class="icon icon-me"></span>
              <span class="tab-label">我的</span>
            </a>
          </nav>
          <div class="content">
            <div class="content-padded image_parent">
                <div class="row ">
                    <div class="col-25"><img src="images/icon/xyk.png" alt="">
                    校园卡服务
                </div>
                    <div class="col-25">
                        <img src="images/icon/zzdk.png" alt="">
                    资助贷款</div>
                    <div class="col-25">
                        <img src="images/icon/cjkcb.png" alt="">
                    超级课程表</div>
                    <div class="col-25">
                        <img src="images/icon/cjcx.png" alt="">
                    成绩查询</div>
                </div>
                <div class="row">
                    <div class="col-25">
                        <img src="images/icon/bshd.png" alt="">
                    比赛活动</div>
                    <div class="col-25">
                        <img src="images/icon/xyzp.png" alt="">
                    校园招聘</div>
                    <div class="col-25">
                        <img src="images/icon/xysx.png" alt="">
                    校园实习</div>
                    <div class="col-25">
                        <img src="images/icon/sjjy.png" alt="">
                    书籍借阅</div>
                </div>
            </div>
                <h4>热门推荐</h4>
                <!-- <div class="card"> -->
                    <div class="card facebook-card">
                        <div class="card-header no-border">
                          <div class="facebook-avatar"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="34" height="34"></div>
                          <div class="facebook-name">夜萧</div>
                          <div class="facebook-date">星期一 3:47pm</div>
                        </div>
                        <div class="card-content">
                            热聊话题fklds'‘
                            <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="100%">
                        </div>
                        <div class="card-footer no-border">
                          <a href="#" class="link">赞</a>
                          <a href="#" class="link">评论</a>
                          <a href="#" class="link">分享</a>
                        </div>
                    </div>

                    <div class="card facebook-card">
                        <div class="card-header no-border">
                          <div class="facebook-avatar"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="34" height="34"></div>
                          <div class="facebook-name">夜萧</div>
                          <div class="facebook-date">星期一 3:47pm</div>
                        </div>
                        <div class="card-content">
                            热聊话题fklds'‘
                            <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="100%">
                        </div>
                        <div class="card-footer no-border">
                          <a href="#" class="link">赞</a>
                          <a href="#" class="link">评论</a>
                          <a href="#" class="link">分享</a>
                        </div>
                    </div>
                <!-- </div> -->
          </div>
        </div>
        
        <!-- 第二页 -->
        <div class="page" id="shequ">
          <header class="bar bar-nav">
              <div class="searchbar">
                <a class="searchbar-cancel">取消</a>
                <div class="search-input">
                  <label class="icon icon-search" for="search"></label>
                  <input type="search" id='search' placeholder='输入关键字...'/>
                </div>
              </div>
          </header>
          <nav class="bar bar-tab">
            <a class="tab-item" href="#shouye">
              <span class="icon icon-home"></span>
              <span class="tab-label">首页</span>
            </a>
            <a class="tab-item active" href="#shequ">
              <span class="icon icon-friends"></span>
              <span class="tab-label">社区</span>
            </a>
            <a class="tab-item" href="#fabiao">
              <span><img src="images/icon/add.png" alt="" width="30pt"></span>
              <span class="tab-label"></span>
            </a>
            <a class="tab-item" href="#zixun">
              <span class="icon icon-browser"></span>
              <span class="tab-label">资讯</span>
            </a>
            <a class="tab-item" href="#wode">
              <span class="icon icon-me"></span>
              <span class="tab-label">我的</span>
            </a>
          </nav>
          <div class="content">
            <div class="buttons-tab">
                <a href="#xingqu" class="tab-link active button">兴趣杂谈</a>
                <a href="#guandian" class="tab-link button">校园观点</a>
                <a href="#qinggan" class="tab-link button">情感交流</a>
              </div>
                <div class="tabs">
                  <div id="xingqu" class="tab active">
                      <img src="images/pic/xqzt.png" alt="" width="100%">
                  </div>
                  <div id="guandian" class="tab">
                    <img src="images/pic/gd1.png" alt="" width="100%">
                    <img src="images/pic/gd2.png" alt="" width="100%">
                  </div>
                  <div id="qinggan" class="tab">
                    <img src="images/pic/qgjl.png" alt="" width="100%">
                    <img src="images/pic/qg1.png" alt="" width="100%">
                    <img src="images/pic/qg1.png" alt="" width="100%">
                    <img src="images/pic/qg1.png" alt="" width="100%">
                  </div>
                </div>
          </div>
        </div>
        <!-- 第三页 -->
        <div class="page" id="fabiao">
          <header class="bar bar-nav">
            <a class="icon icon-left pull-left" href="#shouye"></a>
            <a class="icon icon-check pull-right"></a>
            <h1 class="title">发帖</h1>
          </header>
          <div class="content">
            <div class="list-block">
                <ul>
                    <li>
                        <div class="item-content">
                          <div class="item-media"><i class="icon icon-form-name"></i></div>
                          <div class="item-inner">
                            <div class="item-title label">话题名称</div>
                            <div class="item-input">
                              <input type="text" placeholder="给话题起个响亮的名字或类型">
                            </div>
                          </div>
                        </div>
                    </li>
                    <li class="align-top">
                        <div class="item-content">
                          <div class="item-media"><i class="icon icon-form-name"></i></div>
                          <div class="item-inner">
                            <div class="item-title label">话题描述</div>
                            <div class="item-input">
                              <textarea name="" id="" cols="30" rows="50"></textarea>
                            </div>
                          </div>
                        </div>
                    </li>
                </ul>
            </div>
          </div>
        </div>

        <!-- 第四页 -->
        <div class="page" id="zixun">
          <header class="bar bar-nav">
              <div class="searchbar">
                <a class="searchbar-cancel">取消</a>
                <div class="search-input">
                  <label class="icon icon-search" for="search"></label>
                  <input type="search" id='search' placeholder='输入关键字...'/>
                </div>
              </div>
          </header>
          <nav class="bar bar-tab">
            <a class="tab-item" href="#shouye">
              <span class="icon icon-home"></span>
              <span class="tab-label">首页</span>
            </a>
            <a class="tab-item" href="#shequ">
              <span class="icon icon-friends"></span>
              <span class="tab-label">社区</span>
            </a>
            <a class="tab-item" href="#fabiao">
              <span><img src="images/icon/add.png" alt="" width="30pt"></span>
              <span class="tab-label"></span>
            </a>
            <a class="tab-item active" href="#zixun">
              <span class="icon icon-browser"></span>
              <span class="tab-label">资讯</span>
            </a>
            <a class="tab-item" href="#wode">
              <span class="icon icon-me"></span>
              <span class="tab-label">我的</span>
            </a>
          </nav>
          <div class="content">
              <div class="buttons-tab">
                <a href="#zhaopin" class="tab-link active button">校园招聘</a>
                <a href="#shixi" class="tab-link button">校园实习</a>
                <a href="#huodong" class="tab-link button">比赛活动</a>
              </div>
                <div class="tabs">
                  <div id="zhaopin" class="tab active">
                    <img src="images/pic/xyzp.png" alt="" width="100%">
                  </div>
                  <div id="shixi" class="tab">
                    <img src="images/pic/xysx.png" alt="" width="100%">
                  </div>
                  <div id="huodong" class="tab">
                    <img src="images/pic/bs1.png" alt="" width="100%">
                    <img src="images/pic/bs2.png" alt="" width="100%">
                  </div>
                </div>
          </div>
        </div>

        <!-- 第五页 -->
        <div class="page" id="wode">
          <header class="bar bar-nav">
              <div class="searchbar">
                <a class="searchbar-cancel">取消</a>
                <div class="search-input">
                  <label class="icon icon-search" for="search"></label>
                  <input type="search" id='search' placeholder='输入关键字...'/>
                </div>
              </div>
          </header>
          <nav class="bar bar-tab">
            <a class="tab-item" href="#shouye">
              <span class="icon icon-home"></span>
              <span class="tab-label">首页</span>
            </a>
            <a class="tab-item" href="#shequ">
              <span class="icon icon-friends"></span>
              <span class="tab-label">社区</span>
            </a>
            <a class="tab-item" href="#fabiao">
              <span><img src="images/icon/add.png" alt="" width="30pt"></span>
              <span class="tab-label"></span>
            </a>
            <a class="tab-item" href="#zixun">
              <span class="icon icon-browser"></span>
              <span class="tab-label">资讯</span>
            </a>
            <a class="tab-item active" href="#wode">
              <span class="icon icon-me"></span>
              <span class="tab-label">我的</span>
            </a>
          </nav>
          
          <div class="content">
            <div class="my_header">
              <div class="my">
                  <img src="images/pic/me.png" alt="">
                  <p>永远有多远！</p>
              </div>
          </div>
              <div class="list-block media-list list">
                <ul>
                  <li>
                    <div class="item-content item-link">
                      <div class="item-media"><img src="images/icon/my_xx.png" style='width: 2rem;'></div>
                      <div class="item-inner">
                        <div class="item-title-row">
                            我的消息
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="item-content item-link">
                      <div class="item-media"><img src="images/icon/my_tz.png" style='width: 2rem;'></div>
                      <div class="item-inner">
                        <div class="item-title-row">
                            我的帖子
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="item-content item-link">
                      <div class="item-media"><img src="images/icon/my_gz.png" style='width: 2rem;'></div>
                      <div class="item-inner">
                        <div class="item-title-row">
                            我的关注
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>

                <ul>
                    <li>
                    <div class="item-content item-link">
                      <div class="item-media"><img src="images/icon/my_xyk.png" style='width: 2rem;'></div>
                      <div class="item-inner">
                        <div class="item-title-row">
                            我的校园卡
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="item-content item-link">
                      <div class="item-media"><img src="images/icon/my_zz.png" style='width: 2rem;'></div>
                      <div class="item-inner">
                        <div class="item-title-row">
                            我的资助贷款
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="item-content item-link">
                      <div class="item-media"><img src="images/icon/my_kcb.png" style='width: 2rem;'></div>
                      <div class="item-inner">
                        <div class="item-title-row">
                            我的课程表
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="item-content item-link">
                      <div class="item-media"><img src="images/icon/my_jy.png" style='width: 2rem;'></div>
                      <div class="item-inner">
                        <div class="item-title-row">
                            我的借阅
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
                <ul>
                    <li>
                    <div class="item-content item-link">
                      <div class="item-media"><img src="images/icon/sz.png" style='width: 2rem;'></div>
                      <div class="item-inner">
                        <div class="item-title-row">
                            设置
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
          </div>
        </div>
    </div>
    <script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
    <script>$.init()</script>
  </body>
</html>